<template>
  <div class="ShopCar">
    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/sportsShop' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运动商城系统</el-breadcrumb-item>
        <el-breadcrumb-item>购物车</el-breadcrumb-item>
      </el-breadcrumb>

    </div>
    .
    <br>

    <div style="position:relative; height: 30px;line-height:30px;">

      <div style="position:absolute;left:10px;top: 50%; transform: translateY(-50%);">
        <el-tag type="warning">
          <h2>欢迎： {{ userInformation.username}}</h2>
        </el-tag>
        &nbsp;&nbsp;
        <el-tag>
          <h2> 账户余额： {{ userInformation.wallet}} 元</h2>
        </el-tag>
      </div>

      <div style="position:absolute;right:10px;top: 50%; transform: translateY(-50%);">
        <el-button type="success" plain @click="warnShow()">结算购物车</el-button>
      </div>

    </div>

    <br>
    <el-table :data="shop_cart" stripe style="width: 100%; text-align: center;">

      <el-table-column prop="goods_picture" label="图片" width="180">
        <template v-slot="scope">
          <img :src="scope.row.goods_picture" alt="" style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>

      <el-table-column prop="goods_name" label="名称" width="180">
      </el-table-column>


      <el-table-column prop="goods_price" label="单价">
      </el-table-column>


      <el-table-column  prop="shopping_count" label="数量">
        <template v-slot="scope">
          <el-input-number v-model="shop_cart[scope.$index].shopping_count" :min="1" :max="10" label="购买数量"  @change="handleChange()"></el-input-number>
        </template>
      </el-table-column>


      <el-table-column prop="shopping_amount" label="金额">
        <template v-slot="scope">
          <el-tag>{{ shop_cart[scope.$index].shopping_count * shop_cart[scope.$index].goods_price }}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="shopping_cart_id" label="操作">
        <template v-slot="scope">
          <el-button type="danger" plain @click="removeShopCartByIndex(scope.$index)">删除</el-button>
          <el-button type="primary" plain @click="simpleBuy(scope.$index)">购买</el-button>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>
  
<script>


export default {
  data() {
    return {
      // 购物车数据
      shop_cart: [
        {
          "goods_id": 1,
          "goods_name": "红米note",
          "goods_picture": "http://192.168.123.53:8888/sports_shop_backend_war/users_picture/kzb68up.jpg",
          "goods_price": 1999,
          "shopping_amount": 799,
          "shopping_cart_id": 1,
          "shopping_count": 1,
          "user_id": 4,
          "username": "冰镇生鲜"
        }
      ],

      // 个人信息
      userInformation: {
        "grade": "vip",
        "level": 1,
        "password": "123456",
        "state_message": "这个人很懒，什么都没有留下",
        "type": "root",
        "user_id": 4,
        "user_picture": "http://192.168.123.53:8888/sports_shop_backend_war/users_picture/kzb68up.jpg",
        "username": "冰镇生鲜",
        "wallet": -2995
    }
    }
  },
  mounted () {
    this.getShopCartById();
    this.getUserInfo();
  },
  methods: {

    // 网络请求，获取购物车数据
    getShopCartById () {
      this.$http({
        url: '/getShopCartById',
        params: {
          //键值对
         user_id: window.sessionStorage.getItem('user_id')
        },
        method: 'post'
      }).then(res => {
        // 登录成功判断，以及保存token
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取购物车数据失败')
        } else {
          this.$message.success('获取购物车数据成功')

          this.shop_cart = res.data.data;
          
        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 删除 购物车数据 （通过利用索引获得目标数组的 shopping_cart_id ）
    removeShopCartByIndex (index) {
      // console.log(this.shop_cart[index].shopping_cart_id)
      this.$http({
        url: '/deleteShoppingCartById',
        params: {
          //键值对
          shopping_cart_id: this.shop_cart[index].shopping_cart_id
        },
        method: 'post'
      }).then(res => {
        if (res.data.status !== 200) {
          return this.$message.error('删除购物车记录失败')
        } else {
          this.$message.success('删除购物车记录成功')
          // 重新加载购物车数据
          this.getShopCartById()
        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 获取个人信息
    getUserInfo () {
      this.$http({
        url: '/getUserInfo',
        params: {
          //键值对
         user_id: window.sessionStorage.getItem('user_id')
        },
        method: 'post'
      }).then(res => {
        // 登录成功判断，以及保存token
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取个人信息失败')
        } else {
          this.$message.success('获取个人信息成功')
          this.userInformation = res.data.data;
        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 简单购买商品，直接上传购物车数据,并且通过shoping_id删除购物车记录
    simpleBuy (index) {
      const params = {
         goods_id: this.shop_cart[index].goods_id,
         goods_name: this.shop_cart[index].goods_name,
         goods_picture: this.shop_cart[index].goods_picture,
         goods_price: this.shop_cart[index].goods_price,
         shopping_amount: this.shop_cart[index].shopping_amount,
         shopping_cart_id: this.shop_cart[index].shopping_cart_id,
         shopping_count: this.shop_cart[index].shopping_count,
         user_id: this.shop_cart[index].user_id,
         username: this.shop_cart[index].username,
         goods_describe: this.shop_cart[index].goods_describe
      };
      // console.log(params);
      this.$http({
        url: '/simpleBuy',
        params,
        method: 'post'
      }).then(res => {
        if (res.data.status !== 200) {
          return this.$message.error('购买失败')
        } else {
          this.$message.warning('购买成功')
          // // 移除该条购物车记录
          // this.removeShopCartByIndex(index)
          // 重新加载购物车
          this.getShopCartById();
          // 重新加载个人信息
          this.getUserInfo()
        }
      }).catch(err => {
        console.log(err);
      })
    },

    // 警告信息-功能紧急开发中
    warnShow () {
      this.$message.warning('功能紧急开发中')
    },
    // 计数器触发，改变购物车数据
    handleChange() {
      this.$message.warning('功能紧急开发中,暂时只能购买一件')
      }
  }

}
</script>

<style>

</style>